<template>
  <div>
    <i-dialog
      :title="type === 'device' ? '阈值配置' : '参数设置'"
      :visible="visible"
      width="1174px"
      :close-on-click-modal="false"
      @close="outerClose"
      @open="outerOpen"
    >
      <div v-if="form.updateTime" class="text-center">
        参数上一次更新时间:{{ form.updateTime }}
      </div>
      <i-form :items="formItems" :model="form" ref="form" label-width="190px">
      </i-form>
      <div slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          v-if="type === 'device'"
          @click="handleDeliver"
          v-loading.fullscreen.lock="fullscreenLoading"
          element-loading-text="指令下发中……"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.8)"
          >下发参数查询命令</el-button
        >
        <el-button type="primary" v-if="type === 'device'" @click="handleQuery"
          >查询设备参数</el-button
        >
        <el-button type="primary" @click="handleDefault">一键配置</el-button>
        <el-button type="primary" @click="submit">修改设备参数</el-button>
        <el-button @click="outerClose">取 消</el-button>
      </div>
    </i-dialog>
  </div>
</template>
<script>
import {
  deliverDeviceThreshold,
  deviceThreshold,
  updateDeviceThreshold,
  getStationConfig,
  setStationConfig,
} from '@/api/device'
import { deviceConfigure } from '../data'
export default {
  data() {
    return {
      fullscreenLoading: false,
      form: {},
      formItems: [
        {
          type: 'text',
          value: 'noloadPower',
          label: '空载电流阈值(A):',
          placeholder: '请输入空载电流阈值',
          clearable: true,
          span: 12,
        },
        {
          type: 'text',
          value: 'noloadTime',
          label: '空载判定时间(秒):',
          placeholder: '请输入空载判定时间',
          clearable: true,
          span: 12,
        },
        {
          type: 'text',
          value: 'overloadCurrent',
          label: '过载电流阈值(A):',
          placeholder: '请输入过载电流阈值',
          clearable: true,
          span: 12,
        },
        {
          type: 'text',
          value: 'overloadTime',
          label: '过载判定时间(秒):',
          placeholder: '请输入过载判定时间',
          clearable: true,
          span: 12,
        },
        {
          type: 'text',
          value: 'fullPower',
          label: '满电电流阈值(A):',
          placeholder: '请输入满电电流阈值',
          clearable: true,
          span: 12,
        },
        {
          type: 'text',
          value: 'fullTime',
          label: '满电判定时间(秒):',
          placeholder: '请输入满电判定时间',
          clearable: true,
          span: 12,
        },
        {
          type: 'text',
          value: 'overTempValue',
          label: '过温温度阈值(°C):',
          placeholder: '请输入过温温度阈值',
          clearable: true,
          span: 12,
        },
        {
          type: 'text',
          value: 'overTempTime',
          label: '过温判定时间(秒):',
          placeholder: '请输入过温判定时间',
          clearable: true,
          span: 12,
        },
        {
          type: 'text',
          value: 'openCircuitVoltage',
          label: '开路电压阈值(V):',
          placeholder: '请输入开路电压阈值',
          clearable: true,
          span: 12,
        },
        {
          type: 'text',
          value: 'closedCircuitVoltage',
          label: '闭路电压阈值(V):',
          placeholder: '请输入闭路电压阈值',
          clearable: true,
          span: 12,
        },
        {
          type: 'text',
          value: 'startLpValue',
          label: '起始小功率判定阈值(W):',
          placeholder: '请输入起始小功率判定阈值',
          clearable: true,
          span: 12,
        },
        {
          type: 'text',
          value: 'startLpTime',
          label: '起始小功率判定时间(秒):',
          placeholder: '请输入起始小功率判定时间',
          clearable: true,
          span: 12,
        },
        {
          type: 'text',
          value: 'refMaxPower',
          label: '校准功率(W):',
          placeholder: '请输入校准功率',
          clearable: true,
          span: 12,
        },
        {
          type: 'text',
          value: 'refRatioValue',
          label: '校准系数:',
          placeholder: '请输入校准系数',
          clearable: true,
          span: 12,
        },
      ],
    }
  },
  props: {
    visible: {
      type: Boolean,
      required: true,
    },
    optionAttr: {
      type: Object,
      default: () => {},
    },
    type: {
      type: String,
      default: 'device',
    },
  },
  methods: {
    refreshTable() {
      this.$emit('refreshTable')
    },
    outerClose() {
      this.form = {}
      this.$emit('update:visible', false)
      this.$emit('update:optionAttr', {})
    },
    outerOpen() {
      if (this.type === 'station') {
        getStationConfig({ stationId: this.optionAttr.id }).then((res) => {
          this.form = res
        })
      }
    },
    handleDeliver() {
      this.fullscreenLoading = true
      deliverDeviceThreshold({ deviceId: this.optionAttr.deviceId }).then(
        () => {
          this.fullscreenLoading = false
        },
        () => {
          this.fullscreenLoading = false
        }
      )
    },
    handleQuery() {
      deviceThreshold({ deviceId: this.optionAttr.deviceId }).then((res) => {
        this.form = res
      })
    },
    handleDefault() {
      this.form = Object.assign({}, deviceConfigure)
    },
    submit() {
      this.$refs.form.validate((valid) => {
        if (this.form.updateTime) delete this.form.updateTime
        if (
          !valid ||
          !Object.keys(this.form).filter((item) => this.form[item]).length
        ) {
          this.$message({
            showClose: true,
            message: '请至少填写一项！',
          })
          return
        }
        const handler = {
          device: {
            fn: updateDeviceThreshold,
            params: {
              deviceId: this.optionAttr.deviceId,
              ...this.form,
            },
          },
          station: {
            fn: setStationConfig,
            params: {
              ...this.form,
              stationId: this.optionAttr.id,
            },
          },
        }
        handler[this.type].fn(handler[this.type].params).then(
          () => {
            this.$message({
              type: 'success',
              showClose: true,
              message: '修改成功！',
            })
            this.refreshTable()
            this.outerClose()
          },
          () => {
            this.outerClose()
          }
        )
      })
    },
  },
}
</script>
<style lang="scss" scoped>
.transfer-to-edit {
  position: relative;
  top: -403px;
  left: 183px;
}
</style>
